<template><v-container class="flex items-center justify-center h-screen">
  <v-card class="w-full max-w-[400px] pa-4 shadow-md rounded-lg">
    <v-card-title>
      <div class="text-xl font-bold mb-4">注册表单</div>
    </v-card-title>
    <v-form @submit.prevent="handleSubmit" ref="formRef">
      <v-text-field v-model="form.username" label="用户名" :rules="rules.username" required class="mb-4"></v-text-field>
      <v-text-field v-model="form.password" label="用户密码" type="password" :rules="rules.password" required
        class="mb-4"></v-text-field>
      <v-text-field v-model="form.phone" label="用户电话" :rules="rules.phone" required class="mb-4"></v-text-field>
      <v-row>
        <v-col cols="12">
          <v-btn type="submit" color="primary" block>注册</v-btn>
        </v-col>
        <v-col cols="12" class="text-right pt-1">
          <router-link to="/login" class="text-decoration-none">登录已有账号</router-link>
        </v-col>
      </v-row>
    </v-form>
  </v-card>
</v-container></template>

<script setup>
// data
const messageStore = useMessageStore()
const router = useRouter()
const form = ref({
})
const formRef = ref(null)
const rules = ref({
  username: [
    value => {
      if (!value) {
        return '用户名不能为空'
      } else if (value.length < 2 || value.length > 20) {
        return '用户名长度在2-20位之间'
      }
    }
  ],
  password: [
    value => {
      if (!value) {
        return '密码不能为空'
      } else if (value.length < 5 || value.length > 20) {
        return '密码长度在5-20位之间'
      }
    }
  ],
  phone: [
    value => {
      if (!value) {
        return '电话不能为空'
      }
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(value)) {
        return '请输入有效的手机号码'
      }
    }
  ]
})

// methods
async function handleSubmit() {
  let { valid } = await formRef.value.validate()
  if (!valid)
    return

  // TODO 处理注册逻辑
  messageStore.success('注册成功')
  // 注册成功后跳转到登录页面
  router.push('/login')
}
</script>

<style scoped>
/* 保留原有的样式，或者根据需要调整 */
</style>